<!DOCTYPE html>
<html lang="en" translate="no">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta
      http-equiv="Content-Security-Policy"
      content="    
            default-src 'self' ; 
            script-src 'self' 'unsafe-inline'; 
            style-src 'self' 'unsafe-inline'; 
            img-src 'self' *; 
            media-src 'self' ; 
            frame-src 'self';
        "
    />
    <meta name="viewport" content="width=device-width, minimal-ui, viewport-fit=cover, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
    <title>Experiments</title>
    <link href="main.css" rel="stylesheet" />
  </head>
  <body>
    <div class="Side">
      <a class="Title" href="https://github.com/FarazzShaikh/glNoise">
        <!-- <img src="../Assets/logo.png" /> -->
        Experiments
      </a>
      <div class="SubTitle">Examples</div>

      <div class="Section">3D</div>
      <a class="Example" sec="misc" selected="true" type="0" href="./3D/Planet/index.html">Planet</a>
      <a class="Example" sec="misc" selected="false" type="0" href="./3D/3D Noise/index.html">Cube</a>
      <a class="Example" sec="misc" selected="false" type="0" href="./3D/Ocean Breeze/index.html">Ocean Breeze</a>
      <a class="Example" sec="misc" selected="false" type="0" href="./3D/Stylized Ocean/index.html">Stylized Ocean</a>
      <a class="Example" sec="misc" selected="false" type="0" href="./3D/Plane/index.html">Plane</a>
      <a class="Example" sec="misc" selected="false" type="0" href="./3D/Randomized Characters/index.html">Randomized Characters</a>

      <div class="Section">Particles</div>
      <a class="Example" sec="misc" selected="false" type="0" href="./Particles/1M Particles/index.html">1M+ Particles</a>

      <div class="Section">2D</div>
      <a class="Example" sec="misc" selected="false" type="0" href="./2D/Map/index.html">Map</a>
      <a class="Example" sec="misc" selected="false" type="0" href="./2D/BlendModes/index.html">Blend Modes</a>
    </div>

    <iframe class="Iframe" allow="autoplay" src=""></iframe>

    <a class="SideIcon">&lt;</a>
    <a class="CodeIcon" href="" target="_blank">&lt;&#47;&gt;</a>

    <script>
      const iFrame = document.querySelector(".Iframe");
      const sourceLink = document.querySelector(".CodeIcon");

      window.addEventListener("load", (e) => {
        const s = webgl_support();
        if (s) {
          const toggleLink = document.querySelector(".SideIcon");
          const exampleLinks = document.querySelectorAll(".Section");
          const exampleTabs = document.querySelectorAll(".Example");

          const sourcePath = "https://github.com/FarazzShaikh/experiments/tree/master/";

          toggleLink.addEventListener("click", (e) => {
            e.preventDefault();
            document.body.toggleAttribute("data-hideSidebar");
          });

          // Load query example in iFrame if linked
          let loadQuery = location.search.split("src=");
          if (loadQuery[1]) {
            iFrame.src = loadQuery[1];
            const split = loadQuery[1].split("/");
            let _src = `/${split[split.length - 3]}/${split[split.length - 2]}`;
            sourceLink.href = sourcePath + _src;
          } else {
            // choose random example to show if none linked
            let target = exampleTabs[Math.floor(Math.random() * exampleTabs.length)];
            updateExample({ target });
          }

          exampleTabs.forEach((link) => {
            link.addEventListener("click", updateExample, false);
          });

          function updateExample(e) {
            const split = e.target.href.split("/");
            let _src = `/${split[split.length - 3]}/${split[split.length - 2]}`;
            let src = `${_src}/${split[split.length - 1]}`;
            exampleTabs.forEach((e) => e.setAttribute("selected", "false"));
            e.target.setAttribute("selected", "true");

            // Allow user to cmd/ctrl + click to open in new tab
            if (e.metaKey) {
              window.open(`${location.origin}${location.pathname}?src=${src}`, "_blank");

              return;
            }

            iFrame.src = e.target.href;
            sourceLink.href = sourcePath + _src;

            // Update search query
            history.pushState(null, null, `${location.origin}${location.pathname}?src=${src}`);
            e.preventDefault && e.preventDefault();
          }
        } else {
          iFrame.src = "./noWebGL.html";
          sourceLink.href = "https://codepen.io/aleksblago/pen/meXvvE";
        }
      });

      function webgl_support() {
        try {
          var canvas = document.createElement("canvas");
          return !!window.WebGLRenderingContext && (canvas.getContext("webgl") || canvas.getContext("experimental-webgl"));
        } catch (e) {
          return false;
        }
      }
    </script>
  </body>
</html>
